<template>
  <div id="bigView">
    <head-2 />
    <beginView
      :textInfo="this.textInfo"
      @isOpen="getOpen"
      v-if="this.isOpend==1"
    />
    <div id="countDown">
      <el-button type="success" size="small" @click="getRes" id="lookMark">查看成绩</el-button>
      <span>倒计时<span id="timeNumber">{{ countDwon }}</span
      >s</span>
      <el-button type="success" size="small" @click="computedRes">提交作答</el-button>
    </div>
    <computedSubject v-if="this.isOpend!=1" :key="this.Number1" @theResult="getResult"/>
    <GetScore :userScore="this.userScore" v-if="this.isOpend==4" @onceTime="getOpenOnce"/>
  </div>
</template>

<script>
import computedSubject from "@/components/computedSubject/computedSubject.vue";
import Head2 from "@/components/Head/head2.vue";
import BeginView from "@/components/beginView/beginView.vue";
import GetScore from '@/components/getScore/getScore.vue';
export default {
  components: { computedSubject, Head2, BeginView, GetScore },
  data() {
    return {
      Number1:0,
      getResult1:[],
      countDwon: 10,
      isOpend: 1,
      isEnd: false,
      textInfo: {
        val: "游戏开始了，加油小朋友",
        textTitlle: "比一比的玩法介绍",
        textContant:
          "小朋友，每次游戏你都有20秒钟的时间进行游，加油！！",
      },
      userScore: {
        score: 0,
        allCount: 8,
        rightCount: 0,
        falseCount: 0,
        rightRate: 0,
        echartId:"computedFirst"+new Date()
      },
    };
  },
  watch: {
    isOpend() {
      if(this.isOpend==2){
          this.Number1++;
          this.userScore.score=0;
          this.userScore.rightCount=0;
          this.userScore.falseCount=0;
          this.userScore.rightRate=0;
        document.getElementById("lookMark").disabled=true;
        document.getElementById("lookMark").style.opacity=0;
        this.contDwon();
      }
      else{
        document.getElementById("lookMark").disabled=false;
        document.getElementById("lookMark").style.opacity=1;
      }
    },
  },
  methods: {
    computedRes(){
      this.countDwon=1
      this.isOpend=4
      this.isEnd = !this.isEnd;
    },
    getRes(){
      this.isOpend=4
    },
    getResult(val){
      this.getResult1=val
    },
    getOpen(val) {
      this.isOpend = val;
    },
    getOpenOnce(val){
      this.isOpend = val;
      this.countDwon=10
    },
    computedResult(){
    console.log(this.getResult1,12312456)
		var tdArr=document.getElementsByTagName("td")
		var inputCount=document.getElementsByTagName("input")
		for(var i=0;i<tdArr.length;i++){
		if(this.getResult1[i]=inputCount[i].value)
		{
      console.log(inputCount[i].style.backgroundColor,77777)
      tdArr[i].style.backgroundColor="green"
			this.userScore.score+=10;
			this.userScore.rightCount++
		}
		else{
      tdArr[i].style.backgroundColor="red"
			this.userScore.falseCount++
		}
	}
	this.userScore.rightRate=this.userScore.rightCount/this.userScore.allCount
	},
    contDwon() {
      const timer = setInterval(() => {
        this.countDwon--;
        if (this.countDwon <= 0) {
          this.userScore.rightRate =
            this.userScore.rightCount / this.userScore.allCount;
          clearInterval(timer);
          this.computedResult()
          this.isOpend=4
          this.isEnd = !this.isEnd;
          this.$store.commit("ADDKNOWLEAGE",1)
          this.$store.commit("ADDACHIEVEMENT",1)
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
#bigView {
  height: 100vh;
  border: 1px solid white;
  #countDown {
    font-size: 18px;
    font-weight: bold;
    margin-top: 3vh;
    letter-spacing: 2px;
    display: flex;
    justify-content: space-around;
    #timeNumber {
      color: red;
    }
  }
}
</style>